<template>
	<div id="cardTradeOrder">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="订单" name="first">
				<shyt-table
					ref="shytTable"
					:columns="columns"
					:data="tableData"
					:auto-resize="true"
					:keep-source="true"
					:pager-config="pageConfig"
					:toolbar-config="toolbarConfig"
					:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
				>
					<!-- @page-change="pageChange" -->
					<template #orgName="{ row }">
						<span>{{ row.orgName }}</span>
					</template>
					<template #cardId="{ row }">
						<span>{{ row.cardId }}</span>
					</template>
					<template #orderNo="{ row }">
						<span>{{ row.orderNo }}</span>
					</template>
					<template #orderFee="{ row }">
						<span>{{ row.orderFee }}</span>
					</template>
					<template #tradeStatus="{ row }">
						<span>{{
							dictModelFun(dictMap.tradeStatus, row.tradeStatus)
						}}</span>
					</template>
					<template #orderSourceType="{ row }">
						<span>{{
							dictModelFun(dictMap.orderSourceType, row.orderSourceType)
						}}</span>
					</template>
					<template #refundStatus="{ row }">
						<span>{{
							dictModelFun(dictMap.refundStatus, row.refundStatus)
						}}</span>
					</template>
					<template #description="{ row }">
						<span>{{ row.description }}</span>
					</template>
					<template #toolbar_buttons>
						<el-input
							v-model="inputCode"
							class="user_input"
							placeholder="请输入查找的"
							size="medium"
						></el-input>
						<el-button type="primary" size="small" @click="handlerSave">
							查询
						</el-button>
						<!--				<el-button type="primary" size="small" @click="handlerAddClick">-->
						<!--					新增-->
						<!--				</el-button>-->
					</template>
				</shyt-table>
			</el-tab-pane>
			<el-tab-pane label="充值" name="second">
				<shyt-table
					ref="shytTable"
					:columns="rechargeColumns"
					:data="rechargeTableData"
					:auto-resize="true"
					:keep-source="true"
					:pager-config="pageConfig"
					:toolbar-config="toolbarConfig"
					:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
				>
					<!-- @page-change="pageChange" -->
					<template #orgName="{ row }">
						<span>{{ row.orgName }}</span>
					</template>
					<template #cardId="{ row }">
						<span>{{ row.cardId }}</span>
					</template>
					<template #orderNo="{ row }">
						<span>{{ row.orderNo }}</span>
					</template>
					<template #mchid="{ row }">
						<span>{{ row.mchid }}</span>
					</template>
					<template #transactionId="{ row }">
						<span>{{ row.transactionId }}</span>
					</template>
					<template #payStatus="{ row }">
						<span>{{ row.payStatus }}</span>
					</template>
					<template #payType="{ row }">
						<span>{{ dictModelFun(dictMap.payType, row.payType) }}</span>
					</template>
					<template #payAmount="{ row }">
						<span>{{ row.payAmount }}</span>
					</template>
					<template #toolbar_buttons>
						<el-input
							v-model="inputCode"
							class="user_input"
							placeholder="请输入查找的"
							size="medium"
						></el-input>
						<el-button type="primary" size="small" @click="handlerSave">
							查询
						</el-button>
					</template>
				</shyt-table>
			</el-tab-pane>
			<el-tab-pane label="退费" name="third">
				<shyt-table
					ref="shytTable"
					:columns="refundColumns"
					:data="refoundTableData"
					:auto-resize="true"
					:keep-source="true"
					:pager-config="pageConfig"
					:toolbar-config="toolbarConfig"
					:edit-config="{ trigger: 'dbclick', mode: 'row', showStatus: true }"
				>
					<!-- @page-change="pageChange" -->
					<template #orgName="{ row }">
						<span>{{ row.orgName }}</span>
					</template>
					<template #cardId="{ row }">
						<span>{{ row.cardId }}</span>
					</template>
					<template #mchid="{ row }">
						<span>{{ row.mchid }}</span>
					</template>
					<template #refundId="{ row }">
						<span>{{ row.refundId }}</span>
					</template>
					<template #outRefundNo="{ row }">
						<span>{{ row.outRefundNo }}</span>
					</template>
					<template #transactionId="{ row }">
						<span>{{ row.transactionId }}</span>
					</template>
					<template #refundStatus="{ row }">
						<span>{{ row.refundStatus }}</span>
					</template>
					<template #payType="{ row }">
						<span>{{ row.payType }}</span>
					</template>
					<template #channel="{ row }">
						<span>{{ row.channel }}</span>
					</template>
					<template #refundMoney="{ row }">
						<span>{{ row.refundMoney }}</span>
					</template>
					<template #orderMoney="{ row }">
						<span>{{ row.orderMoney }}</span>
					</template>
					<template #toolbar_buttons>
						<el-input
							v-model="inputCode"
							class="user_input"
							placeholder="请输入查找的"
							size="medium"
						></el-input>
						<el-button type="primary" size="small" @click="handlerSave">
							查询
						</el-button>
					</template>
				</shyt-table>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import {
	getPageList,
	rechargePageList,
	refundPageList,
} from '@/http/cardTradeOrder.js'
import { getSysDataDictList } from '@/http/dict'
export default {
	name: 'ServiceApi',
	data() {
		return {
			activeName: 'first',
			// 查询
			inputCode: '',
			// 编辑
			compileRow: {},
			//字典
			dictMap: {
				chargeFlag: [],
				tradeStatus: [
					{ value: 0, display: '进行中' },
					{ value: 1, display: '已完成' },
					{ value: 2, display: '取消交易' },
				],
				orderSourceType: [
					{ value: 0, display: 'APP' },
					{ value: 1, display: '小程序' },
					{ value: 2, display: '后台' },
					{ value: 3, display: '支付宝' },
				],
				refundStatus: [
					{ value: 0, display: '未退款' },
					{ value: 1, display: '已退款' },
				],
				payType: [
					{ value: 0, display: '微信APP支付' },
					{ value: 1, display: '微信小程序支付' },
					{ value: 2, display: '支付宝支付' },
					{ value: 3, display: '其他' },
				],
			},
			// 新增弹框
			dialogTableVisible: false,
			tableData: [],
			rechargeTableData: [],
			refoundTableData: [],
			columns: [
				{
					field: 'orgName',
					title: '机构名称',
					slots: { default: 'orgName' },
				},
				{
					field: 'cardId',
					title: '卡ID',
					slots: { default: 'cardId' },
				},
				{
					field: 'orderNo',
					title: '订单号',
					slots: { default: 'orderNo' },
				},
				{
					field: 'orderFee',
					title: '订单费用',
					slots: { default: 'orderFee' },
				},
				{
					field: 'tradeStatus',
					title: '订单状态',
					slots: { default: 'tradeStatus' },
				},
				{
					field: 'orderSourceType',
					title: '订单来源',
					slots: { default: 'orderSourceType' },
				},
				{
					field: 'refundStatus',
					title: '退款状态',
					slots: { default: 'refundStatus' },
				},
				{
					field: 'description',
					title: '订单描述',
					slots: { default: 'description' },
				},
			],
			rechargeColumns: [
				{
					field: 'orgName',
					title: '机构名称',
					slots: { default: 'orgName' },
				},
				{
					field: 'cardId',
					title: '卡ID',
					slots: { default: 'cardId' },
				},
				{
					field: 'orderNo',
					title: '订单号',
					slots: { default: 'orderNo' },
				},
				{
					field: 'mchid',
					title: '商户号',
					slots: { default: 'mchid' },
				},
				{
					field: 'transactionId',
					title: '微信订单号',
					slots: { default: 'transactionId' },
				},
				{
					field: 'payStatus',
					title: '交易状态',
					slots: { default: 'payStatus' },
				},
				{
					field: 'payType',
					title: '付款途径',
					slots: { default: 'payType' },
				},
				{
					field: 'payAmount',
					title: '付款金额',
					slots: { default: 'payAmount' },
				},
			],
			refundColumns: [
				{
					field: 'orgName',
					title: '机构名称',
					slots: { default: 'orgName' },
				},
				{
					field: 'cardId',
					title: '卡ID',
					slots: { default: 'cardId' },
				},
				{
					field: 'mchid',
					title: '商户号',
					slots: { default: 'mchid' },
				},
				{
					field: 'refundId',
					title: '微信退款单号',
					slots: { default: 'refundId' },
				},
				{
					field: 'outRefundNo',
					title: '商户退款单号',
					slots: { default: 'outRefundNo' },
				},
				{
					field: 'transactionId',
					title: '微信订单号',
					slots: { default: 'transactionId' },
				},
				{
					field: 'refundStatus',
					title: '退款状态',
					slots: { default: 'refundStatus' },
				},
				{
					field: 'payType',
					title: '退款类型',
					slots: { default: 'payType' },
				},
				{
					field: 'channel',
					title: '退款渠道',
					slots: { default: 'channel' },
				},
				{
					field: 'refundMoney',
					title: '退款金额',
					slots: { default: 'refundMoney' },
				},
				{
					field: 'orderMoney',
					title: '订单金额',
					slots: { default: 'orderMoney' },
				},
			],
			toolbarConfig: {
				slots: {
					buttons: 'toolbar_buttons',
				},
			},
			//分页
			pageConfig: {
				currentPage: 1,
				pageSize: 10,
				pageSizes: [10, 20, 30, 50],
				total: 0,
				background: true,
				layouts: [
					'PrevPage',
					'JumpNumber',
					'NextPage',
					'FullJump',
					'Sizes',
					'Total',
				],
			},
		}
	},
	async created() {
		this.dataList('', this.pageConfig.currentPage, this.pageConfig.pageSize)
		// this.rechargePageList(
		// 	'',
		// 	this.pageConfig.currentPage,
		// 	this.pageConfig.pageSize,
		// )
		// this.refundPageList(
		// 	'',
		// 	this.pageConfig.currentPage,
		// 	this.pageConfig.pageSize,
		// )

		// 缴费状态
		this.dictMap.chargeFlag = await this.getSysDataDictList('RC_CHARGE_STATUS')
	},
	methods: {
		handleClick() {
			this.handlerSave()
		},

		async getSysDataDictList(typeCode) {
			let param = { type: typeCode, delFlag: '0', whetherEnable: '0' }
			let list = []
			let res = await getSysDataDictList(param)
			if (res.data?.head?.code == 200) {
				list = res.data.data
			}
			return list
		},
		dataList(inputCode, pageNum, pageSize) {
			getPageList({
				inputCode: inputCode,
				pageNum: pageNum,
				pageSize: pageSize,
			}).then(({ data }) => {
				this.tableData = data.data.records
				this.pageConfig.total = data.data.total
				console.log(data.data.records)
			})
		},
		rechargePageList(inputCode, pageNum, pageSize) {
			rechargePageList({
				inputCode: inputCode,
				pageNum: pageNum,
				pageSize: pageSize,
			}).then(({ data }) => {
				this.rechargeTableData = data.data.records
				this.pageConfig.total = data.data.total
				console.log(data.data.records)
			})
		},
		refundPageList(inputCode, pageNum, pageSize) {
			refundPageList({
				inputCode: inputCode,
				pageNum: pageNum,
				pageSize: pageSize,
			}).then(({ data }) => {
				this.refoundTableData = data.data.records
				this.pageConfig.total = data.data.total
				console.log(data.data.records)
			})
		},
		//分页
		pageChange({ currentPage, pageSize }) {
			this.dataList(this.userInput.toUpperCase(), currentPage, pageSize)
			this.pageConfig.currentPage = currentPage
			this.pageConfig.pageSize = pageSize
		},
		// 查询
		handlerSave() {
			this.pageConfig.currentPage = 1
			this.pageConfig.pageSize = 10
			if (this.activeName == 'first') {
				this.dataList(
					this.inputCode,
					this.pageConfig.currentPage,
					this.pageConfig.pageSize,
				)
			} else if (this.activeName == 'second') {
				this.rechargePageList(
					this.inputCode,
					this.pageConfig.currentPage,
					this.pageConfig.pageSize,
				)
			} else if (this.activeName == 'third') {
				this.refundPageList(
					this.inputCode,
					this.pageConfig.currentPage,
					this.pageConfig.pageSize,
				)
			}
		},
		// 新增
		handlerAddClick() {
			this.dialogTableVisible = true
		},

		// 编辑
		handlerEditRow(row) {
			this.dialogTableVisible = true
			this.compileRow = this._.cloneDeep(row)
			console.log(row)
		},

		//字典找值
		dictModelFun(dictList, cellVal) {
			let str = '-'
			if (dictList) {
				let obj = dictList.find(e => cellVal == e.value)
				if (obj) {
					str = obj.display
				}
			}
			return str
		},
	},
}
</script>

<style lang="scss" scoped>
.user_input {
	width: 200px;
}
</style>
